<template>
  <div class="login">
    <h2>Test文库账号注册</h2>
    <el-form>
      <el-input placeholder="用户名" v-model="user.name" />
      <el-input placeholder="邮箱" v-model="user.email" />
      <el-input
        type="password"
        placeholder="密码"
        show-password
        v-model="user.pass1"
      />
      <el-input
        type="password"
        placeholder="确认密码"
        show-password
        v-model="user.pass2"
      />
      <p class="msg">{{ msg }}</p>
      <el-button class="btn" @click="subfun">注 册</el-button>
    </el-form>
  </div>
</template>

<script>
import store from "../store";
import {ElMessageBox } from "element-plus";
export default {
  name: "Res",
  data() {
    return {
      user: { name: "", email: "", pass1: "", pass2: "" }, //注册信息
      msg: "",
    };
  },
  methods: {
    subfun: function () {
      this.msg = "";
      if (this.user.name == "") {
        this.msg = "用户名不能为空";
      } else if (this.user.name.length < 5 || this.user.name.length > 20) {
        this.msg = "用户名长度为5-20位";
      } else if (this.user.email == "") {
        this.msg = "邮箱不能为空";
      } else if (/\w+@\w+\.com/.test(this.user.email) == false) {
        this.msg = "邮箱模式不正确";
      } else if (this.user.pass1 == "") {
        this.msg = "密码不能为空";
      } else if (this.user.pass1 != this.user.pass2) {
        this.msg = "密码不一致";
      } else {
        store.commit("adduser", this.user);
        ElMessageBox.alert("注册成功","提示",{
			confirmButtonText:"登录",
		});
        this.$router.push({ path: "/login" });
      }
    },
  },
};
</script>

<style scoped></style>
